<template>
  <span
    class="paragraph"
    ref="text"
  ></span>
</template>

<script>
export default {
  name: 'ParaGraph',
  props: {
    text: {
      type: String,
      default: ''
    },
    lineHeight: {
      type: Number,
      default: 34
    },
    rows: {
      ype: Number,
      default: 3
    },
    suffix: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
    }
  },
  methods: {
    overflowhidden(textDom, rows, lineHeight, suffix) {
      var at = rows * parseInt(lineHeight);//计算包含文本的div应该有的高度
      var tempstr = this.text;//获取到所有文本
      textDom.innerHTML = tempstr;//将所有文本写入html中
      var len = tempstr.length;
      var i = 0;
      if (textDom.offsetHeight <= at) { //如果所有文本在写入html后文本没有溢出，那不需要做溢出处理
        textDom.innerHTML = tempstr;
      } else {//否则 一个一个字符添加写入 不断判断写入后是否溢出
        var temp = "";
        textDom.innerHTML = temp + "..." + `<span class="theme-fc">${suffix}</span>`;
        while (textDom.offsetHeight <= at) {
          temp = tempstr.substring(0, i + suffix.length);
          i++;
          textDom.innerHTML = temp + "..." + `<span class="theme-fc">${suffix}</span>`;
        }
        var slen = temp.length;
        tempstr = temp.substring(0, slen);
        len = tempstr.length
        textDom.innerHTML = tempstr.substring(0, len - suffix.length) + "..." + `<span class="theme-fc">${suffix}</span>`;//替换string后面三个字符
      }
    },
  },
  mounted() {
    this.overflowhidden(this.$refs.text, this.rows, this.lineHeight, this.suffix)
  }
}
</script>

<style lang="less" scoped>
.paragraph {
  font-size: .6rem;
  color: #333;
  line-height: 18px;
  text-align: justify;
  text-justify: newspaper;
  word-break: break-all;
}
</style>